<template>
  <div class="goodsOnline" curpage="goodsOnlineew323423432423423">
    <div class="exitExclel">
      <div class="header">
        <div class="headerContent">
          <div class="titleTxt">
            批量修改
            <span @click="tourShow=true"><el-icon><Warning /></el-icon
            ></span>
          </div>
          <div class="btnBox">
            <el-button plain @click="closeWindow">暂不修改</el-button>
            <el-button type="primary" @click="confirmSubmit">确认提交</el-button>
          </div>
        </div>
      </div>
      <div class="editTableDiv" style="" v-if="!headLoading">
        <basicTableSum ref="editTableRef" v-bind="tableConfig"> </basicTableSum>
      </div>
    </div>
    <div>
      <cardSatus v-bind="loadingParams" @contunitEdit="contunitEditFun"></cardSatus>
    </div>
    <div class="tourDiv" v-if="tourShow">
      <div class="tourContent">
        <span class="closeSpan" @click="tourShow=false"
          ><el-icon><Close /></el-icon
        ></span>
        <div class="img_show">
          <div class="tourTitle">①单击选中，双击进行编辑</div>
          <img src="/src/assets/images/editTour/1.png" />
        </div>
        <div  class="img_show">
           <div class="tourTitle">②ctrl+鼠标左键选中,右键点击获取「批量编辑」</div>
          <img src="/src/assets/images/editTour/2.png" />
        </div>
         <div  class="img_show">
           <div class="tourTitle">shift+鼠标左键选中,右键点击获取「批量编辑」</div>
          <img src="/src/assets/images/editTour/3.png" />
        </div>
         <div  class="img_show">
           <div class="tourTitle">④点击表头全列选中,右键点击获取「批量编辑」</div>
          <img src="/src/assets/images/editTour/4.png" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="goodsOnline">
import basicTableSum from "@/components/MerakEditTable/components/basicTable/editExcel.vue";
import qfInput from "@/components/MerakEditTable/components/a-qfInput/index.vue";
import cardSatus from "@/components/MerakEditTable/components/a-loading/index.vue";
import { ref, reactive, defineProps, onMounted, computed, nextTick } from "vue";

import { getTableFieldsApi, getTableListApi, saveTableGoodsApi } from "@/api/modules/goodsArchive/batchImport/import";
import { ResultEnum } from "@/enums/httpEnum";
import { cos } from "mathjs";
import { getLocationParams } from "@/utils/index";

import {
  moreConfirm,
  confirmWarningMsg,
  successMsg,
  warnMsg,
  failMsg,
  confirmSuccessMsg,
  delConfimMsg
} from "@/utils/messageUtils";

//接收url参数
const newUrl = new URL(window.location.href);
let import_id = getLocationParams(newUrl.href, 'import_id');
console.log(import_id, "传入参数");

const isShowProgress = ref(false); //提交loading
const currNumber = ref(0); //当前提交条数
const allErrNumber = ref(0); //全部条数

const editTableRef = ref(null);
const value2 = ref("");

const loadingParams = reactive({
  isShowProgress: false,
  currNumber: 0,
  allErrNumber: 0,
  errorNumber: 0,
  successNumber: 0
});
const tourShow=ref(false)
let errInfoArr = []; //错误数组
const splitNumber = 10;
let splitIndex = 0;
const confirmSubmit = async () => {
  splitIndex = 0;
  errInfoArr = []; //每次提交都清空
  let postDataArr = editTableRef.value.submitData();
  console.log(postDataArr)
  let allPostLen = postDataArr.length; //所有提交数组长度
  loadingParams.allErrNumber = allPostLen; //所有长度
  loadingParams.currNumber = 0; //
  loadingParams.isShowProgress = true; //打开提交弹窗

  //每10个拆分形成新数组=
  let splitedArrs = [];
  let size = splitNumber;
  for (let i = 0; i < allPostLen; i += size) {
    let splited = postDataArr.slice(i, i + size);
    splitedArrs.push(splited);
  }

  let splitLen = splitedArrs.length;
  for (let ss = 0; ss < splitLen; ss++) {
    await postDateFun(splitedArrs[ss]).then(errDataInfo => {
      splitIndex = splitIndex + splitNumber;
      loadingParams.currNumber = splitIndex; //当前提交条数
      if (allPostLen != 5) {
        //测试   所有都提交完了
        errInfoArr = errInfoArr.concat(errDataInfo);
      }

      if (splitLen - 1 == ss) {
        //最后一组提交成功后

        loadingParams.currNumber = allPostLen;

        loadingParams.errorNumber = errInfoArr.length; //错误条数
        loadingParams.successNumber = allPostLen - errInfoArr.length; //成功条数
      }
    });
  }

  // isShowProgress.value = true;
  // let timmer = setInterval(() => {
  //   splitIndex = splitIndex + 10;
  //   currNumber.value = splitIndex;
  //   if (splitIndex > postDataArr.length) {
  //     currNumber.value = postDataArr.length;
  //     clearInterval(timmer);
  //     return;
  //   }
  //   postData = postDataArr.slice(splitIndex, splitNumber + splitIndex);
  // }, 1000);
};

const postDateFun = dataParams => {
  //   saveTableGoodsApi({data:dataParams}).then(res=>{

  //   })
  return new Promise((resolve, reject) => {
      saveTableGoodsApi({import_id:import_id,data:dataParams}).then(res=>{
          console.log(res)
    }).catch(err=>{
      console.log("9999999")
      resolve(dataParams);
    })
    // setTimeout(() => {
    //   let res = {
    //     code: 2000,
    //     data: JSON.parse(JSON.stringify(tableConfig.tableData.slice(0, 5)))
    //   };
    //   if (res.code == ResultEnum.SUCCESS) {
    //     resolve(res.data);
    //   }
    //   console.log(res);
    // }, 1000);
  });
};

//继续移交
const contunitEditFun = val => {
  loadingParams.isShowProgress = false;

  if (val == "other") {
    //继续编辑其余的数据
    initData();
    return;
  }

  // Object.assign(, errInfoArr);

  tableConfig.tableData = errInfoArr;
  headLoading.value = true;
  nextTick(() => {
    headLoading.value = false;
  });
};

const closeWindow = () => {
   window.close();
  // confirmSuccessMsg({
  //   msg: "是否确认关闭当前窗口???",
  //   callback: val => {
  //     console.log(val, "成功confirm还是失败cancel");
  //     if (val == "confirm") {
        // window.close();
  //     }
  //   }
  // });
};

// const paramsObj = reactive([date, name, address]);
const tableHeadData = reactive([]);
const tableData = reactive([]);
const headConfig = reactive({}); //头部配置是否可编辑
console.log(tableData);
// 行列选中样式  当前选中样式
// 行尾部和删除
const tableConfig = reactive({
  headData: tableHeadData, //表格头部数据
  tableData: tableData, //表格内容数据
  editStatus: false //开启虚拟加载,关闭新增保存
});

// headConfig:{
//     column1:{
//     type:'select',
//     options:[]
//       }, //select\input\date
//     }
// {
//     title: 'title',
//     field: 'key',
//     fixed: 'left',
//     width: '200px'
// }

let number1 = 100;
let number = 200;

const headLoading = ref(false);
const initData = () => {
  headLoading.value = true;

  console.time("for");
  let headArr = [];
  let headCon = {};

  let TableNew = [];
  for (let i = 0; i < number; i++) {
    let objKey = {
      _id: "11" + i,
      number: "222",
      data: {
        spu: {
          label: "1111",
          errTip: "Женская Рубашка MIX, Модель Женская Рубашка MIX, Модель Женская Рубашка MIX, Модель Женская Рубашка MIX, Модель "
        },
        sku: {
          label: "1111"
        },
        qf_code: {
          label: "1111"
        },
        model: {
          label: "1111"
        },
        code: {
          label: "1111"
        },
        supplier_sku: {
          label: "1111",
          errTip: "Женская Рубашка MIX, Модель "
        },
        brand: {
          label: "1111"
        },
        num_in_packing: {
          label: "1111"
        },
        net_weight: {
          label: "1111"
        },
        qifa_color: {
          label: "1111"
        },
        supplier_color: {
          label: "1111"
        },
        manufacturer_county: {
          label: "1111"
        },
        volume: {
          label: "1111"
        },
        weight: {
          label: "1111"
        },
        size: {
          label: "1111"
        },
        category: {
          label: "1111",
          errTip: "Женская Рубашка MIX, Модель "
        },
        mk_color: {
          label: "1111",
          errTip: "Женская Рубашка MIX, Модель "
        }
      }
    };

    TableNew.push(objKey);
    // TableNew.push({
    //     index: i,
    //     date: '2016-05-03',
    //     name: 'Tom',
    //     address: 'No. 189, Grove St, Los Angeles',
    //    selection:true
    // })
  }
  console.log(TableNew);
  getTableFieldsApi({ import_id: import_id }).then(res => {
    console.log(res.data);
    Object.assign(tableHeadData, res.data);
    //  Object.assign(tableHeadData, headArr);
    getTableListApi({ import_id: import_id }).then(res => {
  
      let newData = res.data.map(v => { 
        return {
          ...v
        };
      });
      console.log(newData); 
      // Object.assign(tableData, TableNew);
      //  tableConfig.tableData=TableNew;

       tableConfig.tableData=newData;
      headLoading.value = false;
    });
  });

  console.timeEnd("for");
};

onMounted(() => {
  initData();
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
